<!-- 操作日志 -->
<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="行业类别">
          <el-cascader
            v-model="searchForm.industry"
            option-max-width="230px"
            class="ui-w230"
            :props="{ multiple: true }"
            collapse-tags
            :collapse-tags-max-num="1"
            :tooltip-max-width="230"
            tooltip-effect="light"
            :options="TASKOBJ.industryTypeAndIndustry"
            clearable
            @change="industryChange"
          />
        </el-form-item>
        <el-form-item label="交易方式">
          <el-select
            v-model="searchForm.tenderMode"
            class="ui-w180"
            option-max-width="180px"
            placeholder="请选择"
            clearable
            @change="handleSearchFn()"
          >
            <!-- <el-option key label="全部" value></el-option> -->
            <el-option v-for="(value, key) in tenderModeOptionsObj" :key="key" :label="value" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="资审方式">
          <el-select
            v-model="searchForm.zsType"
            class="ui-w180"
            option-max-width="180px"
            placeholder="请选择"
            clearable
            @change="handleSearchFn()"
          >
            <!-- <el-option key label="全部" value></el-option> -->
            <el-option
              v-for="item in TASKOBJ.qualificationExamMethods"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="rigthText">
          <el-input
            v-model.trim="searchForm.keywords"
            class="ui-w320"
            placeholder="项目名称/编号"
            @keyup.native.enter="handleSearchFn()"
          >
            <el-button slot="append" type="primary" icon="icon-sousuo" @click="handleSearchFn()" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column type="index" align="left" label="序号" width="50">
          <template slot-scope="scope">
            {{ (pageObj.currentPage - 1) * pageObj.pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" min-width="200" />
        <el-table-column prop="projectCode" label="项目编号" min-width="200" />
        <el-table-column prop="industryType" label="行业类别" min-width="80" :formatter="formatterIndustry" />
        <el-table-column prop="tenderMode" label="交易方式" min-width="120" :formatter="formatterTenderMode" />
        <el-table-column
          prop="qualificationExamMethod"
          label="资审方式"
          min-width="159"
          :formatter="formatterQualificationExamMethod"
          show-overflow-tooltip
        />
        <!-- <el-table-column prop="businessUnit" label="业务部门" min-width="159" show-overflow-tooltip />
        <el-table-column prop="operateUserName" label="经办人" min-width="159" show-overflow-tooltip /> -->
        <el-table-column label="操作" align="left" header-align="center" width="200">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.BTN_VIEW_OPERATE_LOG"
              type="text"
              size="default"
              @click="WitnessLogControllerFn(scope)"
            >
              查看操作日志
            </el-button>
            <el-button
              v-if="scope.row.BTN_DETAIL_PROJECT"
              type="text"
              size="default"
              @click="handleViewDetailFn(scope)"
            >
              项目详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="layout-footer">
      <pagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :page-sizes="pageObj.pageSizes"
        @pagination="projectListFn()"
      />
    </div>
    <!-- 项目详情弹窗 -->
    <!-- <ProjectDetailsDialog :visible.sync="detailDialogShow" :projectId="currentProjectId" :taskObj="TASKOBJ" /> -->
    <ProjectDetailsDrawer
      :visible.sync="detailDialogShow"
      @closeDrawer="closeDrawerFn"
      :project-id="currentProjectId"
      :task-obj="TASKOBJ"
    />
  </div>
</template>
<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  import { moduleInit, projectList } from "../../../api/api";
  import { FindArrayFn, getFirstAndSecondLevel } from "../../../utils/utils";
  // import ProjectDetailsDialog from "../../../components/dialog/ProjectDetailsDialog.vue";
  import ProjectDetailsDrawer from "../../../components/dialog/ProjectDetailsDrawer.vue";
  export default {
    // 引入组件
    components: { ProjectDetailsDrawer },
    props: {},
    data() {
      // 这里存放数据
      return {
        currentWitness: {},
        assignData: [],
        assignShow: false,
        assignTitle: "",
        assignType: "",
        searchForm: {
          industry: [],
          industrySecondLevel: [], // 选中的行业类别的二级菜单的数组集合
          tenderMode: "",
          zsType: "",
          keywords: ""
        },
        TASKOBJ: {}, // 后端返回的所有下拉映射值数据
        tenderModeIndustryObj: {}, // 依据行业类别一级菜单分组显示的交易方式
        tenderModeOptionsObj: {}, // 交易方式下拉
        tableData: [],
        tableLoading: false,
        pageObj: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        detailDialogShow: false, // 是否展示项目详情弹窗
        currentProjectId: "" // 当前操作的项目id
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.moduleInitFn();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    // 方法集合
    methods: {
      closeDrawerFn() {
        console.log("closeDrawerFn");
        this.currentProjectId = "";
        this.detailDialogShow = false;
      },
      async moduleInitFn() {
        try {
          const res = await moduleInit({ moduleName: "TASK" });
          if (res.success) {
            this.TASKOBJ = res.data;
            // 依据行业类别的一级分类分组显示交易方式
            for (let i = 0; i < res.data.industryTypeAndTenderMode.length; i++) {
              const obj = res.data.industryTypeAndTenderMode[i];
              this.tenderModeIndustryObj[obj.value] = obj.children;
            }
            this.industryChange([]); // 获取交易方式的下拉
            // this.projectListFn(); // 获取列表
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.log(error);
        }
      },
      // 行业类别发生变化，交易方式下拉选项联动
      industryChange(arr) {
        const obj = getFirstAndSecondLevel(arr);
        this.searchForm.industrySecondLevel = obj.secondLevel;
        this.tenderModeOptionsObj = {};
        if (obj.firstLevel.length === 0) {
          // 1. 当行业类型没有值时，交易方式默认返回所有的下拉值
          for (const key in this.tenderModeIndustryObj) {
            this.tenderModeOptionsObj = this.getTenderModeOptions(
              this.tenderModeOptionsObj,
              this.tenderModeIndustryObj[key]
            );
          }
        } else {
          // 2. 有值时，依据一级行业的一级菜单获取交易方式的下拉
          for (let i = 0; i < obj.firstLevel.length; i++) {
            this.tenderModeOptionsObj = this.getTenderModeOptions(
              this.tenderModeOptionsObj,
              this.tenderModeIndustryObj[obj.firstLevel[i]]
            );
          }
        }
        this.handleSearchFn();
      },
      getTenderModeOptions(obj, arr) {
        for (let i = 0; i < arr.length; i++) {
          if (!obj.hasOwnProperty(arr[i].value)) {
            obj[arr[i].value] = arr[i].label;
          }
        }
        return obj;
      },
      // 搜索查询
      handleSearchFn() {
        this.pageObj.total = 0;
        this.pageObj.currentPage = 1;
        this.projectListFn();
      },
      // 见证操作日志列表查询
      async projectListFn() {
        try {
          this.tableLoading = true;
          this.tableData = [];
          const industryTypeList = [];
          const industryList = [];
          const obj = {};
          this.searchForm.industry.forEach((item) => {
            if (!obj[item[0]]) {
              obj[item[0]] = 1;
              if (item[0] != null) {
                industryTypeList.push(item[0]);
              }
            }
            if (item[1] != null) {
              industryList.push(item[1]);
            }
          });
          const params = {
            industryTypeList, // 行业类型
            industryList,
            tenderMode: this.searchForm.tenderMode,
            qualificationExamMethod: this.searchForm.zsType,
            search: this.searchForm.keywords,
            currentPage: this.pageObj.currentPage,
            pageSize: this.pageObj.pageSize
          };
          const res = await projectList(params);
          this.tableLoading = false;
          if (res.success) {
            if (res.data.data.length === 0 && this.pageObj.currentPage !== 1) {
              this.pageObj.currentPage = 1;
              this.$nextTick(() => {
                this.projectListFn();
              });
              return;
            }
            const arr = [];
            res.data.result.forEach((proItem) => {
              const proObj = proItem.data;
              proItem.pageOpers.forEach((val) => {
                proObj[val.code] = true;
              });
              arr.push(proObj);
            });
            this.tableData = arr;
            console.log(this.tableData, "-------------------1");
            this.pageObj.total = res.data.pageBean.count;
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.log(error);
          this.tableLoading = false;
        }
      },
      formatterIndustry(row) {
        let str = "";
        if (row.industryType) {
          const obj = FindArrayFn(this.TASKOBJ.industryTypeAndIndustry, row.industryType);
          str = obj.label;
        }
        if (row.industry) {
          const inObj = FindArrayFn(this.TASKOBJ.industryTypeAndIndustry, row.industry);
          str = `${str}/${inObj.label}`;
        }
        return str;
      },
      formatterTenderMode(row) {
        let str = "";
        if (row.tenderMode) {
          str = this.tenderModeOptionsObj[row.tenderMode];
        }
        return str;
      },
      formatterQualificationExamMethod(row) {
        let str = "";
        if (row.qualificationExamMethod) {
          const obj = FindArrayFn(this.TASKOBJ.qualificationExamMethods, row.qualificationExamMethod);
          str = obj.label;
        }
        return str;
      },
      // 项目详情
      handleViewDetailFn(row) {
        this.currentProjectId = row.row.projectId;
        this.detailDialogShow = true;
      },
      // 查看操作日志
      WitnessLogControllerFn(row) {
        this.$router.push({
          name: "WitnessLogControllerOperate",
          query: {
            projectName: row.row.projectName,
            witnessTaskId: row.row.projectId
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .witness-result {
    width: 76px;
    height: 20px;
    line-height: 20px;
    background: #fc9306;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    text-align: center;
  }
  .rigthText {
    padding-right: 10px;
    float: right;
    // margin-left: 460px !important;
  }
</style>
